<script setup lang="ts">
import {ArticleItem} from "../types/data"
import {onMounted,ref,defineProps,defineEmits,watch} from "vue"
import {getArticleAPI} from "../api/channel"
// 响应式数据
const articlesList=ref<ArticleItem[]>([])

// prop
const props= defineProps<{channelId:number}>()

// function
const loadData=async ()=>{
  const res=await getArticleAPI(props.channelId)
  articlesList.value=res.data?.results
}

// watch
watch(()=>props.channelId,()=>{loadData()},{immediate:true})
</script>

<template>
  <div class="article-list">
    <div class="article-item" v-for="item in articlesList" :key="item.art_id">
      <p class="title">{{ item.title }}</p>
      <img
        v-for="(src, i) in item.cover.images"
        :key="i"
        class="img"
        :src="src"
        alt=""
      />
      <div class="info">
        <span>{{ item.aut_name }}</span>
        <span>{{ item.comm_count }}评论</span>
        <span>{{ item.pubdate }}</span>
      </div>
    </div>
  </div>
</template>